<template>
	<view class="queryrate">
		<u-navbar title="佣金查询" :back-icon-size="28" back-icon-color="#000000" :title-size="28" :border-bottom="false"
		 :back-text-style="{ color: '#000000', fontSize: '26rpx' }" title-color="#000000" :custom-back="goback" :background="{ background: '#ffffff' }"></u-navbar>
		<view class="valueipt">
			<u-input v-model="value" :height="156" type="textarea" :border="true" :maxlength="150" placeholder="支持 商品id" />
			<u-button size="default" :ripple="true" :hair-line="false" :disabled="disabled" :custom-style="{
					color: disabled == true ? '#787882' : '#ffffff',
					backgroundColor: disabled == true ? '#DFDFDF' : '#FFDB28',
					border: 'none',
					marginTop:'52rpx'
				}"
			 @click="doquery">
				查 询
			</u-button>
		</view>
		<view class="queryend" v-if="israteshow">
			<view class="querytitle">
				当前佣金
			</view>
			<view class="queryprice">
				{{ queryprice }}%
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'queryrate',
		data() {
			return {
				value: '',
				disabled: true,
				queryprice: 0,
				israteshow: false
			};
		},
		//实例创建完成后被立即调用
		created() {},
		watch: {
			value: function(val) {
				// console.log(this.form.username);
				if (val !== '') {
					this.disabled = false;
				} else {
					this.disabled = true;
					this.israteshow = false
				}
			}
		},
		onLoad(option) {},
		//挂载开始之前被调用
		beforeMount() {},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		//初次渲染完成
		onReady() {},
		//全局只触发一次
		onLaunch() {},
		//从后台进入前台
		onShow() {},
		//前台进入后台
		onHide() {},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			doquery() {
				this.$u.api.getGoodsRate({
					goods_id: this.value
				}).then(res => {
					if (200 === res.code) {
						this.queryprice = res.data.commission_type + " ：" + res.data.commission_rate
					} else {
						this.queryprice = '查询失败'
					}
				});
				this.israteshow = true
			}
		}
	};
</script>

<style lang="scss" scoped>
	.queryrate {
		.valueipt {
			width: 628rpx;
			margin: 0 auto;
		}

		.queryend {
			width: 628rpx;
			margin: 0 auto;
			text-align: center;
			margin-top: 176rpx;

			.querytitle {
				font-size: 28rpx;
				color: #787882;
			}

			.queryprice {
				margin-top: 34rpx;
				font-size: 50rpx;
				color: #101010;
			}
		}
	}
</style>
